<template>

  <div>
    <!-- <h3>policeDriverList</h3> -->
    <!-- 驾驶员管理 -->
    <el-table
      :data="policeList"
      style="width: 100%"
      :default-sort="{ prop: 'date' }"
    >
     <el-table-column label="序号" type="index" prop="index" sortable>
       <template slot-scope="scope">
         <span>{{ (page.current - 1) * page.size + scope.$index + 1 }}</span>
       </template>
     </el-table-column>

      <el-table-column label="身份证号">
        <template slot-scope="scope">
          <span style="margin-left: 20px">{{ scope.row.cardId}}</span>
        </template>
      </el-table-column>

     <el-table-column label="电话">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.phone }}</span>
        </template>
      </el-table-column>
      <el-table-column label="警队地址">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.address }}</span>
        </template>
      </el-table-column>
      <el-table-column label="生日">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{formatTimer(scope.row.birthday)}}</span>
        </template>
      </el-table-column>
      <el-table-column label="身份证签发机关">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.department }}</span>
        </template>
      </el-table-column>
      <el-table-column label="名字">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.state }}</span>
        </template>
      </el-table-column>
      <el-table-column label="有效期" prop="date" sortable>
        <template slot-scope="scope">
          <span>{{ formatTimer(scope.row.validity) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <span style="margin-left: 10px" @click="update(scope.row)">修改</span>
          <span style="margin-left: 10px" @click="backout(scope.row)">注销</span>
        </template>
      </el-table-column>


    </el-table>
    <el-pagination
      :spam="20"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page.current"
      :page-sizes="[3, 5, 10, 50]"
      :page-size="page.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="page.total"
      style="text-align: center"
    >
    </el-pagination>

    <!-- 对话框 -->
    <el-dialog :title="title" :visible.sync="isShow" width="30%">

       <el-form ref="policeListForm" label-width="80px">
         <br>
         <el-form-item label="驾驶员身份证号">
           <el-col :span="22">
             <el-input placeholder="请输入驾驶员身份证号" v-model="policeListForm.cardId"></el-input>
           </el-col>
         </el-form-item>

         <el-form-item label="手机号">
           <el-col :span="22">
             <el-input placeholder="请输入手机号" v-model="policeListForm.phone"></el-input>
           </el-col>
         </el-form-item>

        <el-form-item label="地址" >
           <el-col :span="22">
             <el-input placeholder="请输入地址" v-model="policeListForm.address" ></el-input>
           </el-col>
         </el-form-item>
         <el-form-item label="领证日期">
           <el-col :span="22">
             <el-date-picker
                   v-model="policeListForm.birthday"
                   type="datetime"
                   placeholder="选择日期"
                   value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss">
             </el-date-picker>
           </el-col>
         </el-form-item>
         <el-form-item label="身份证签发机关" >
           <el-col :span="22">
             <el-input placeholder="请输入身份证签发机关" v-model="policeListForm.department"></el-input>
           </el-col>
         </el-form-item>

         <el-form-item label="姓名">
           <el-col :span="22">
             <el-input placeholder="请输入姓名" v-model="policeListForm.name"></el-input>
           </el-col>
         </el-form-item>
         <el-form-item label="身份证状态">
           <el-col :span="22">
             <el-input placeholder="请输入身份证状态" v-model="policeListForm.state"></el-input>
           </el-col>
         </el-form-item>
         <el-form-item label="有效日期至">
           <el-col :span="22">
             <el-date-picker
                   v-model="policeListForm.validity"
                   type="datetime"
                   placeholder="选择日期"
                   value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss">
             </el-date-picker>
           </el-col>
         </el-form-item>

       </el-form>

       <span slot="footer" class="dialog-footer">
         <el-button @click="isShow = false">取 消</el-button>
         <el-button type="primary" @click="saveInfo">保存</el-button>
       </span>
     </el-dialog>
  </div>
</template>

<script>
  import Url from "@/util/URLUtil";
  export default{
    name:"AllPoliceList",
    data() {
      return{
        policeList: [],
         title:"修改",
        page: {
           current: 1, //当前页
           size: 5, //每页数据条数
           pages: 0, //总页数
           total: 0, //总数据条数
        },
        policeListForm:{
          id:null,
          cardId:"",
          phone:"",
          address:"",
          birthday:"",
          department:"",
          name:"",
          state:"",
          validity:""
        },
        isShow:false
      }
    },
    methods:{
      //初始化表格数据
      initPoliceListTable(){
        var mythis=this;
        $.ajax({
          url:Url.url+"/aqi/getPolice",
          type:"get",
          contentType: "application/json",
          data:{current: mythis.page.current, size: mythis.page.size },
          success(rs){
            console.log("--"+rs);
            mythis.policeList=rs.records;
            mythis.page.total=rs.total;
            mythis.page.size=rs.size;
            mythis.page.current=rs.current;
            mythis.page.pages=rs.pages;
          }
        });
      },
      //修改驾驶证
      update(row){
         //更改模态框的标题
         this.title="修改";
         //显示模态框
         this.isShow=true;
         //清除表单元素
        this.policeListForm.cardId=row.cardId;
        this.policeListForm.phone=row.phone;
        this.policeListForm.address=row.address;
        this.policeListForm.birthday=row.birthday;
        this.policeListForm.department=row.department;
        this.policeListForm.name=row.name;
        this.policeListForm.state=row.state;
        this.policeListForm.validity=row.validity;
      },
      //撤销驾驶证
      backout(row){
         var mythis = this;
         console.log(row)
          this.$confirm("你确定要删除数据吗?").then(function() {
            $.ajax({
              url: Url.url + "/aqi/deletePoliceAndIdCard/"+row.cardId,
              type: "delete",
              success: function(data) {
                console.log(data.info)
                mythis.$message(data.info)
                if (data.info == "删除成功") {
                  //刷新
                  mythis.initPoliceListTable();
                }
              }
            })
          });

      },
      saveInfo(){
        var mythis = this;
          console.log(mythis.policeListForm);
          $.ajax({
            url: Url.url + "/aqi/updateDriverAndIdCard",
            type: "put",
            contentType: "application/json",
            data:JSON.stringify(mythis.policeListForm),
            success: function(data) {
              console.log(data)
              mythis.$message(data.info)
              if (data.info=="修改成功") {
                //关闭模态框
                mythis.isShow = false;
                //刷新
                mythis.initPoliceListTable();
              }
            }
          })
      },
      //修改每页尺寸
      handleSizeChange(val) {
        this.page.size = val;
        this.page.current = 1;
        this.initPoliceListTable();
      },
      //修改当前页
      handleCurrentChange(val) {
        this.page.current = val;
        this.initPoliceListTable();
      },
      //日期格式化工具
      formatTimer(value) {
        let date = new Date(value);
        let y = date.getFullYear();
        let MM = date.getMonth() + 1;
        MM = MM < 10 ? "0" + MM : MM;
        let d = date.getDate();
        d = d < 10 ? "0" + d : d;
        let h = date.getHours();
        h = h < 10 ? "0" + h : h;
        let m = date.getMinutes();
        m = m < 10 ? "0" + m : m;
        let s = date.getSeconds();
        s = s < 10 ? "0" + s : s;
        return y + "-" + MM + "-" + d + " " + h + ":" + m;
      },

    },
    mounted() {
        this.initPoliceListTable();
    }
  }
</script>

<style>
</style>
